<template>
  <div class="main-tab-bar">
    <van-tabbar   v-model="active" route active-color="#ff5777" inactive-color="#000" >
       <van-tabbar-item   v-for="(item, index) in Icons" :key="index" :to="item.path">
        <span>{{item.text}}</span>
        <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal">
      </van-tabbar-item>

    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "MainTabBar",
  components: {},
  data() {
    return {
      active: 0,
      Icons: [
        {
          path:'/home',
          text:'主页',
          normal: require("assets/img/tabbar/home.svg"),
          active: require("assets/img/tabbar/home_active.svg")
        },
        {
          path:'/category',
          text:'分类',
          normal: require("assets/img/tabbar/category.svg"),
          active: require("assets/img/tabbar/category_active.svg")
        },
        {
          path:'/cart',
          text:'购物车',
          normal: require("assets/img/tabbar/shopcart.svg"),
          active: require("assets/img/tabbar/shopcart_active.svg")
        },
        {
          path:'/profile',
          text:'个人中心',
          normal: require("assets/img/tabbar/profile.svg"),
          active: require("assets/img/tabbar/profile_active.svg")
        }
      ],
      
    };
  },
  methods: {
    // *******************************网络请求*******************************
    // *******************************逻辑处理*******************************
   
 
  },
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import ; 引入公共css类
van-tabbar{
  border-top: 1px solid #000;
}
</style>